<template>
	<div>
		<h1 style="text-align: center;">统计最近七天的利润</h1>
		<el-row>
			<el-col>
				<!-- 柱状图的显示区域 -->
				<div class="echart" id="mychart" :style="myChartStyle"></div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	//引入
	import * as echarts from "echarts";
	export default {
		data() {
			return {
				//后端传递过来
				myChartStyle: {
					float: "left",
					width: "100%",
					height: "400px"
				} //图表样式
			}
		},
		mounted() {
			//柱状图
			this.initBar();
		},
		methods: {
			// 初始化柱状图
			initBar() {
				this.$postRequest("/echarts/week").then(resp => {
					if (resp) {
						// 基本柱状图
						const option = {
							xAxis: {
								data: resp.data.days
							},
							// 图例
							legend: {
								data: ["进货金额", "销售金额"],
								top: "0%"
							},
							yAxis: {},
							series: [{
									type: "bar", //形状为柱状图
									data: resp.data.purchaseData,
									name: "进货金额"
								},
								{
									type: "bar", //形状为柱状图
									data: resp.data.saleData,
									name: "销售金额"
								},
							]
						};
						const myChart = echarts.init(document.getElementById("mychart"));
						myChart.setOption(option);
						//随着屏幕大小调节图表
						window.addEventListener("resize", () => {
							myChart.resize();
						});
					}
				})
			}
		}
	}
</script>
<style>
</style>